<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" label-position="right" label-width="120px" >
      <div class="title_2">任务查询</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="分公司" prop="branchId">
            <el-select
              v-model="queryParams.branchId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务发起人" prop="initiatorName">
            <el-input
              v-model="queryParams.initiatorName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务发起时间" prop="createTime" style="width: 420px">
            <el-date-picker
              v-model="queryParams.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder=" "
              end-placeholder=" "
              value-format="YYYY-MM-DD"
              size="default"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="任务大类" prop="bizGategory">
            <el-select
              v-model="queryParams.bizGategory"
              placeholder="请选择"
              clearable
              @change="changeBiz"
              style="width: 300px"
            >
              <el-option
                v-for="dict in bizGategoryOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务类型" prop="bizType">
            <el-select
              v-model="queryParams.bizType"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in bizTypeOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务流水号" prop="todoNo">
            <el-input
              v-model="queryParams.todoNo"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="处室" prop="sectionId">
            <el-select
              v-model="queryParams.sectionId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in sectionOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label=" " prop="myAttention">
            <el-checkbox v-model="queryParams.myAttention" label="我关注的法人客户任务" size="large" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-form-item>
          <el-button  @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="getList('init')">搜索</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-row :gutter="10">
      <div class="title_2">任务列表</div>
    </el-row>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="0" label="全 部"></el-tab-pane>
      <el-tab-pane name="1" label="待领取"></el-tab-pane>
      <el-tab-pane name="2" label="待处理"></el-tab-pane>
      <el-tab-pane name="3" label="已处理"></el-tab-pane>
      <div class="mb10 pull-right" v-if="activeName == 1">
        <el-button plain type="primary" @click="batchRead">批量领取</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="taskList"
      >
        <el-table-column type="selection" v-if="activeName == 1" width="55" align="left" />
        <el-table-column label="任务流水号" align="center" prop="todoNo" :show-overflow-tooltip="true"/>
        <el-table-column label="任务大类" align="center" prop="bizGategory" :show-overflow-tooltip="true"/>
        <el-table-column label="任务类型" align="center" prop="bizType" :show-overflow-tooltip="true"/>
        <el-table-column label="业务描述" align="center" prop="bizContent" :show-overflow-tooltip="true"/>
        <el-table-column label="分公司" align="center" prop="branchName" :show-overflow-tooltip="true"/>
        <el-table-column label="发起人" align="center" prop="initiatorName" :show-overflow-tooltip="true"/>
        <el-table-column label="发起日期" align="center" prop="createTime" :show-overflow-tooltip="true"/>
        <el-table-column label="任务状态" align="center" prop="taskStatusName" :show-overflow-tooltip="true"/>
        <el-table-column label="业务流程" align="center" prop="handleDept" :show-overflow-tooltip="true"/>
        <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
          <template #default="{row}">
            <el-button link type="primary" v-if="row.status == 1" @click="upStatus(row)">领取</el-button>
            <el-button link type="primary" v-if="row.status == 2" @click="upStatus(row)">取消领取</el-button>
            <el-button link type="primary" v-if="row.status == 2" @click="handle(row)">处理</el-button>
            <el-button link type="primary" v-if="row.status == 2" @click="transfer(row)">转派</el-button>
            <el-button link type="primary" @click="checkProcess(row)">查看流程</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 10"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-tabs>
    <el-dialog v-model="flowChartVisible" title="查看流程" width="60%" append-to-body>
      <img src="./CKLC.png" style="width: 100%;" alt="" srcset="">
    </el-dialog>
    <TransferDialog v-model:visible="TransferVisible"/>
  </div>
</template>

<script setup name="myTask">
import TransferDialog from "../components/TransferDialog.vue"
import { getTime } from "@/utils/index.js"
import { parseTime } from "@/utils/ruoyi.js"
import { ref } from "vue";
const router = useRouter()
const { proxy: vm } = getCurrentInstance()

// 领取、取消领取
const upStatus = (row) => {
  row.status = row.status == '1' ? '2' : '1'
  vm.$modal.msgSuccess("操作成功");
  getList('init')
}

// 转派
const TransferVisible = ref(false)
const transfer = () => {
  TransferVisible.value = true
}

// 列表查询-start
const activeName = ref('0')
const queryRef = ref(null)
const loading = ref(true)
const taskList = ref([])
const total = ref(0)
const branchOptions = ref([
  { label: '全部', value: '' },
  { label: '总公司', value: 1 },
  { label: '上海分公司', value: 22 },
])
const bizGategoryOptions = ref([
  { label: '全部', value: '' },
  { label: '客户管理', value: 1 },
])
const bizTypeOptions = ref([
  { label: '全部', value: '' },
])
const sectionOptions = ref([
  { label: '全部', value: '' },
])
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  branchId: undefined,
  todoNo: undefined,
  bizGategory: '',
  bizType: '',
  sectionId: '',
  initiatorName: '',
  createTime: [],
  myAttention: undefined,
})
queryParams.createTime = [parseTime(getTime('start'), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')]
const changeBiz = (val) => {
  queryParams.bizType = ''
  if (val) {
    bizTypeOptions.value = [
      { label: '全部', value: '' },
      { label: '客户新增', value: '1' },
    ]
  } else {
    bizTypeOptions.value = [
      { label: '全部', value: '' },
    ]
  }
}
const handleClick = (tab, event) => {
  getList('init')
}
const getList = (type) => {
  loading.value = true
  if(type){
    queryParams.pageNum = 1
  }
  setTimeout(() => {
    taskList.value = [
      {
        status: "1",
        todoNo: "2024010111",
        bizGategory: "客户管理",
        bizTypeCode: "1",
        bizType: "客户新增",
        bizContent: "清单式管理客户上海建筑有限公司的最大且唯一股东上海建筑集团没有纳入清单式管理，需新增该客户",
        branchName: "上海分公司",
        initiatorName: "张三",
        createTime: "2024-01-01",
        taskStatusName: "待领取",
        handleDept: "分公司提交",
      },
      {
        status: "2",
        todoNo: "2024010112",
        bizGategory: "客户管理",
        bizTypeCode: "1",
        bizType: "客户新增",
        bizContent: "业务描述...",
        branchName: "上海分公司",
        initiatorName: "张三",
        createTime: "2024-01-01",
        taskStatusName: "待处理",
        handleDept: "分公司核保员审批->王丽丽",
      },
      {
        status: "2",
        todoNo: "2024010112",
        bizGategory: "客户管理",
        bizTypeCode: "3",
        bizType: "项目新增",
        bizContent: "业务描述...",
        branchName: "上海分公司",
        initiatorName: "张三",
        createTime: "2024-01-01",
        taskStatusName: "待处理",
        handleDept: "分公司核保员审批->王丽丽",
      },
      {
        status: "2",
        todoNo: "2024010112",
        bizGategory: "客户管理",
        bizTypeCode: "2",
        bizType: "商机新增",
        bizContent: "业务描述...",
        branchName: "上海分公司",
        initiatorName: "张三",
        createTime: "2024-01-01",
        taskStatusName: "待处理",
        handleDept: "分公司核保员审批->王丽丽",
      },
      {
        status: "3",
        todoNo: "2024010113",
        bizGategory: "客户管理",
        bizTypeCode: "1",
        bizType: "客户新增",
        bizContent: "业务描述...",
        branchName: "上海分公司",
        initiatorName: "张三",
        createTime: "2024-01-01",
        taskStatusName: "已处理",
        handleDept: "总公司核保员审批->张某军",
      },
    ].filter(item => {
      return (activeName.value == '0' || activeName.value == item.status)
    })
    total.value = Number(taskList.value.length)
    loading.value = false
  }, 300)
}
const resetQuery = () => {
  queryRef.value.resetFields()
  getList('init')
}
getList()
// 列表查询-end

// 查看流程-start
const flowChartVisible = ref(false)
const checkProcess = (row) => {
  flowChartVisible.value = true
}
// 查看流程-end

// 处理
const handleSelectionChange = (selection) => {
}
const handle = (row) => {
  let path = ""
  if(row.bizTypeCode == "1"){
    path = "/customer/addApproval"
  }
  if(row.bizTypeCode == "2"){
    path = "/business/approval"
  }
  if(row.bizTypeCode == "3"){
    path = "/project/approval"
  }
  router.push({path})
}
</script>
<style lang="scss" scoped>

</style>